<script>
/* 
vue3中定义响应式数据，有两种
1. 复杂对象数据 - reactive 
  作用： 把传进来的 复杂类型数据 转化成响应式
2. 所有数据 - ref
*/

// 1. 必须要导入，才能使用
import { reactive } from 'vue';

export default {
  setup() {
    // 2. reactive 包裹起来才是响应式对象
    const obj = reactive({
      name: 'zs',
      age: 20,
    });
    const change = () => {
      obj.age++;
      console.log('obj', obj);
    };

    return { obj, change };
  },
};
</script>

<template>
  <h1 @click="change">Hello vue3 - {{ obj.name }} - {{ obj.age }}</h1>
</template>
